<template><!--查看(不会显示Button，数据来源于temp，来源于数据库。低级可以看到高级的内容)、编辑(高级可编辑低级，低级不能编辑高级，高级会显示Button,低级不会显示Button)-->
  <div class="app-container">
    <el-steps :space="360" :active="0" finish-status="success" align-center="true">
      <el-step title="提交申请"></el-step>
      <el-step title="待审批"></el-step>
      <el-step title="报修成功"></el-step>
    </el-steps>

    <el-form ref="form" :model="form" label-width="120px"   >
      <table border="1" cellpadding="0px" cellspacing="0px" width="780px" height="580px" align="center">
        <tr>
          <td width="390px" >
            设备编号
          </td>
          <td>
            <input type="text" v-model="temp.id" style="width: 100%;height: 100% ;border: 0px" placeholder="请输入设备编号" :readonly="isSee"  />
          </td>

        </tr>
        <tr>
          <td>
            设备名称
          </td>
          <td>
            <input type="text" v-model="temp.name" style="width: 100%;height: 100% ;border: 0px" placeholder="请输入设备名称" :readonly="isSee" />
          </td>

        </tr>

        <tr>
          <td>
            设备种类
          </td>
          <td style="text-align: left">
            <el-select v-model="temp.category" placeholder="请选择设备种类" class="width:100%;height:100%" :readonly="isSee">
              <el-option label="钻井设备" value="钻井设备" />
              <el-option label="抽油设备" value="抽油设备" />
              <el-option label="清管设备" value="清管设备" />
              <el-option label="加热设备" value="加热设备" />
            </el-select>
          </td>
        </tr>

        <tr>
          <td>
            故障现象描述
          </td>
          <td height="60px">
            <textarea  v-model="temp.desc" style="width: 100%;height: 60%;border: 0px ;resize:none; margin-top: 40px; " placeholder="请描述故障" :readonly="isSee"></textarea>
          </td>
        </tr>

        <tr>
          <td>
            报修者编号
          </td>
          <td>
            <input type="text" v-model="temp.submitId" style="width: 100%;height: 100% ;border: 0px" placeholder="请输入报修者编号" :readonly="isSee" />
          </td>
        </tr>

        <tr>
          <td>
            审批角色
          </td>
          <td>
            {{temp.handleRole}}
          </td>
        </tr>

        <tr>
          <td>
            报修日期
          </td>
          <td>
            {{getCurrentSubmitTime}}
          </td>
        </tr>
        <tr>
          <td>
            审批者意见
          </td>
          <td readonly="true">
            <el-radio v-model="radio" label="1" disabled="true">同意</el-radio><!--radio3===label1 ，label1亮。使用group应该是懒得多写v-model="radio3"-->
            <el-radio v-model="radio" label="2" disabled="true">不同意</el-radio>
          </td>
        </tr>
        <tr>
          <td>
            审批者派遣维修
          </td>
          <td readonly="true">
            <input type="text" style="width: 100%;height: 100% ;border: 0px"  :readonly="isSee" disabled="true" />
          </td>
        </tr>

      </table>
      <div class="lastone" v-if="isShowButton1" >
        <el-button type="primary" @click="onSubmit">创建</el-button>
        <el-button @click="onCancel">取消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
  export default {
    computed:{
      getCurrentSubmitTime(){
        if(this.BigFormStatus==='edit'){
          var d=new Date();
          var time=d.toLocaleString( );
          return time
        }else{
          return this.submitTime
        }
        // return Date.toLocaleString().toString()
      },
      isShowButton1(){
        if(this.currentRoles.indexOf('advanceManager')!==-1){
          return true
        }else{
          return false
        }
      },
      isEdit(){
        if(this.BigFormStatus==='edit'){
          return false
        }else{
          return true
        }
      },
      isSee(){
        if(this.BigFormStatus==='see'){
          return true
        }else{
          return false
        }
      }

    },
    props:{
      currentRoles:{
        type:Array,
        default:['averageManager','responsibleManager'],
      },
      submitTime:{
        type:String,
        default: 'see',
      },
      BigFormStatus:{
        type:String,
        default:''
      }
    },
    data() {
      return {
        radio:0,
        temp:{
          handleRole:'responsibleManager',
          handleId:'responsibleManager',
          submitTime:'',
        },
        active:0,
        activities: []
      }
    },
    methods: {
      onSubmit() {
        console.log(this.temp)
        this.$router.push('/deviceFix/fixForm/record')
        this.$message('submit!')
      },
      onCancel() {
        this.$message({
          message: 'cancel!',
          type: 'warning'
        })
      }
    }
  }
</script>

<style scoped>
  .line{
    text-align: center;
  }
  .xxxx{
    margin-left: 0 !important;
  }
  .yyyy >>> .el-input__inner{/*el-input__inner是从网页中看到的*/
    margin-left: 0 !important;
    border: 99px solid #b6d8f1;
  }
  /deep/ .el-form-item__content{
    margin-left: 0px !important
  }
  table{
    margin-left: 150px;
    text-align: center;
  }
  >>>.el-input__inner{
    border: 0px;
  }

  .lastone {
    margin-left: 456px!important;
    margin-top: 20px

  }
</style>

